<script type="text/javascript">
	
	var mapping = {'Mo':0, 'Tu':0, 'We':0, 'Th':0, 'Fr':0, 'Sa':0, 'Su':0};
	
	function updateTime(myId){
		var mySelect = document.getElementById(myId);
		var myVal = mySelect.options[mySelect.selectedIndex].text;
		document.getElementById(myId + 'Val').value = myVal;
	}
	
	function handleUpdate(commitId){
		new Ajax.Request('/schedules/updateCommitment', {
		parameters: {
			id: commitId,
			name: document.getElementById(commitId + 'name').value,
			start: document.getElementById(commitId + 'timeStartVal').value,
			end: document.getElementById(commitId + 'timeEndVal').value,
			Mo: document.getElementById(commitId + 'Mo').checked,
			Tu: document.getElementById(commitId + 'Tu').checked,
			We: document.getElementById(commitId + 'We').checked,
			Th: document.getElementById(commitId + 'Th').checked,
			Fr: document.getElementById(commitId + 'Fr').checked,
			Sa: document.getElementById(commitId + 'Sa').checked,
			Su: document.getElementById(commitId + 'Su').checked
		},	
		onSuccess: function(transport) {
			var data = transport.responseText.evalJSON();
			if (data['status'] != true) {
				showError(data['error']);
			}
			else{
				showSuccess("Commitment updated!");
			}
		},
		onFailure: function() {
			showError("Server request failed!");
		}
	});
	}
	
	function handleDelete(commitId){
		new Ajax.Request('/schedules/removeCommitment', {
		parameters: {
			id: commitId
		},
		onSuccess: function(transport) {
			var data = transport.responseText;
			if (data == "true"){
				var myDiv = document.getElementById(commitId);
				var self = document.getElementById('commit_1000014');
				myDiv.parentNode.removeChild(myDiv);
				showSuccess("Commitment Removed")
				//TODO: Remove from actual schedule!
			}
		},
		onFailure: function() {
			showError("Server request failed!");
		}
	});
	}
	
	function addConst(){
		new Ajax.Request('/schedules/getNewCommitment', {
		onSuccess: function(transport) {
			var backendId = transport.responseText;
			var theId = 'commit_' + backendId;
			createConstriant(theId);
		},
		onFailure: function() {
			showError("Server request failed!");
		}
	});
	}
	
	function appendTimes(appendId){
		for (var i = 6; i < 10; i++){
			appendTime('0' + i + ':00 AM', appendId);
			appendTime('0' + i + ':30 AM', appendId);
		}
		for (var j = 10; j < 12; j++){
			appendTime(j + ':00 AM', appendId);
			appendTime(j + ':30 AM', appendId);
		}
		appendTime("12:00 PM", appendId);
		appendTime("12:30 PM", appendId);
		for (var k = 1; k < 9; k++){
			appendTime('0' + k + ':00 PM', appendId);
			appendTime('0' + k + ':30 PM', appendId);
		}
	}
	
	function appendTime(time, appendId){
		var timeTag = document.createElement("OPTION");
		timeTag.innerHTML = time;
		document.getElementById(appendId).options.add(timeTag);
	}
	
	function createConstriant(myId){
		var newDiv = document.createElement("DIV");
		newDiv.id = myId;
		var nameField = document.createElement("INPUT");
		nameField.id = myId + 'name';
		nameField.type = 'text';
		nameField.name = "commitName";
		var timeStartVal = document.createElement("INPUT");
		timeStartVal.id = myId + 'timeStartVal';
		timeStartVal.type = 'hidden';
		timeStartVal.value = "6:00 AM";
		var timeStartField = document.createElement("SELECT");
		timeStartField.id = myId + 'timeStart';
		timeStartField.onchange = function(){
			updateTime(myId + 'timeStart');
		};
		var timeEndVal = document.createElement("INPUT");
		timeEndVal.id = myId + 'timeEndVal';
		timeEndVal.type = 'hidden';
		timeEndVal.value = "6:00 AM";
		var timeEndField = document.createElement("SELECT");
		timeEndField.id = myId + 'timeEnd';
		timeEndField.onchange = function(){
			updateTime(myId + 'timeEnd');
		};
		
		newDiv.appendChild(nameField);
		newDiv.appendChild(timeStartVal);
		newDiv.appendChild(timeStartField);
		newDiv.appendChild(timeEndVal);
		newDiv.appendChild(timeEndField);
		
		for (var day in mapping) {
			var mySpan = document.createElement("SPAN");
			mySpan.innerHTML = day;
			var checkbox = document.createElement("INPUT");
			checkbox.id = myId + day;
			checkbox.type = 'checkbox';
			newDiv.appendChild(mySpan);
			newDiv.appendChild(checkbox);
		}
		
		var update = document.createElement("Button");
		update.innerHTML = "Update";
		update.onclick = function(){
			handleUpdate(myId);
		};
		var remove = document.createElement("Button");
		remove.innerHTML = "Remove";
		remove.onclick = function(){
			handleDelete(myId);
		};
		
		newDiv.appendChild(update);
		newDiv.appendChild(remove);
		
		document.getElementById('commitments_panel').appendChild(newDiv);
		appendTimes(myId + 'timeStart');
		appendTimes(myId + 'timeEnd');
	}
	
</script>

<% def generateOptions %>
	<% for timeVal in (7 .. 20) do %>
	<option><%= Time.parse(timeVal.to_s + ":00").strftime("%I:%M %p") %></option>
	<option><%= Time.parse(timeVal.to_s + ":30").strftime("%I:%M %p") %></option>
	<% end %>
<% end %>

<% def getIndex(time)
	index = (time.hour - 7) * 2
	index += 1 if time.min > 0
	return index
	end
%>

<% mapping = {'Mo' => 'monday',
			  'Tu' => 'tuesday',
			  'We' => 'wednesday',
              'Th' => 'thursday',
			  'Fr' => 'friday',
              'Sa' => 'satuday',
              'Su' => 'sunday' }
%>

<div id="commitments_panel"> 
	Commitments <br />
	<% for commit in @constraints do %>
		<% commitId = 'commit_ + commit.id.to_s' %>
		<div id="<%= commitId %>">
			<input type="text" name="commitName" value="<%= commit.event_name %>">
			<input id="<%= commitId + 'timeStartVal' %>" type="hidden" value='<%= commit.start_time.strftime("%I:%M %p") %>'>
			<select id="<%= commitId + 'timeStart' %>" selectedIndex=<%=getIndex(commit.start_time) %> onchange="updateTime(<%= commitId + timeStart %>)">
				<% generateOptions %>
			</select>
			<input id="<%= commitId + 'timeEndVal' %>" type="hidden" value='<%= commit.stop_time.strftime("%I:%M %p") %>'>
			<select id="<%= commitId + 'timeEnd' %>" selectedIndex=<%= getIndex(commit.stop_time) %> onchange="updateTime(<%= commitId + timeEnd %>)">>
				<% generateOptions %>
			</select>
			<% for day in %w[Mo Tu We Th Fr Sa Su] do %>
				day <input id="<%= commitId + day %>" type="checkbox" checked="<% commit[mapping[day]] %>"> &nbsp
			<% end %>
			<button onclick="handleUpdate(<%= commitId %>)"> Update </button>
			<button onclick="handleDelete(<%= commitId %>)"> Remove </button>
		</div>
	<% end %>
</div>
<button onclick="addConst()"> Add Commitment </button>
